/* ==================
          背景
 ==================== */

 .line-red::after,
 .lines-red::after {
     border-color: #e54d42;
 }
 
 .line-orange::after,
 .lines-orange::after {
     border-color: #f37b1d;
 }
 
 .line-yellow::after,
 .lines-yellow::after {
     border-color: #fbbd08;
 }
 
 .line-olive::after,
 .lines-olive::after {
     border-color: #8dc63f;
 }
 
 .line-green::after,
 .lines-green::after {
     border-color: #39b54a;
 }
 
 .line-cyan::after,
 .lines-cyan::after {
     border-color: #1cbbb4;
 }
 
 .line-blue::after,
 .lines-blue::after {
     border-color: #0081ff;
 }
 
 .line-purple::after,
 .lines-purple::after {
     border-color: #6739b6;
 }
 
 .line-mauve::after,
 .lines-mauve::after {
     border-color: #9c26b0;
 }
 
 .line-pink::after,
 .lines-pink::after {
     border-color: #e03997;
 }
 
 .line-brown::after,
 .lines-brown::after {
     border-color: #a5673f;
 }
 
 .line-grey::after,
 .lines-grey::after {
     border-color: #8799a3;
 }
 
 .line-gray::after,
 .lines-gray::after {
     border-color: #aaaaaa;
 }
 
 .line-black::after,
 .lines-black::after {
     border-color: #333333;
 }
 
 .line-white::after,
 .lines-white::after {
     border-color: #ffffff;
 }
 
 .bg-red {
     background-color: #e54d42;
     color: #ffffff;
 }
 
 .bg-orange {
     background-color: #f37b1d;
     color: #ffffff;
 }
 
 .bg-yellow {
     background-color: #fbbd08;
     color: #333333;
 }
 
 .bg-olive {
     background-color: #8dc63f;
     color: #ffffff;
 }
 
 .bg-green {
     background-color: #39b54a;
     color: #ffffff;
 }
 
 .bg-cyan {
     background-color: #1cbbb4;
     color: #ffffff;
 }
 
 .bg-blue {
     background-color: #0081ff;
     color: #ffffff;
 }
 
 .bg-purple {
     background-color: #6739b6;
     color: #ffffff;
 }
 
 .bg-mauve {
     background-color: #9c26b0;
     color: #ffffff;
 }
 
 .bg-pink {
     background-color: #e03997;
     color: #ffffff;
 }
 
 .bg-brown {
     background-color: #a5673f;
     color: #ffffff;
 }
 
 .bg-grey {
     background-color: #8799a3;
     color: #ffffff;
 }
 
 .bg-gray {
     background-color: #f0f0f0;
     color: #333333;
 }
 
 .bg-black {
     background-color: #333333;
     color: #ffffff;
 }
 
 .bg-white {
     background-color: #ffffff;
     color: #666666;
 }
 
 .bg-shadeTop {
     background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
     color: #ffffff;
 }
 
 .bg-shadeBottom {
     background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
     color: #ffffff;
 }
 
 .bg-red.light {
     color: #e54d42;
     background-color: #fadbd9;
 }
 
 .bg-orange.light {
     color: #f37b1d;
     background-color: #fde6d2;
 }
 
 .bg-yellow.light {
     color: #fbbd08;
     background-color: #fef2ced2;
 }
 
 .bg-olive.light {
     color: #8dc63f;
     background-color: #e8f4d9;
 }
 
 .bg-green.light {
     color: #39b54a;
     background-color: #d7f0dbff;
 }
 
 .bg-cyan.light {
     color: #1cbbb4;
     background-color: #d2f1f0;
 }
 
 .bg-blue.light {
     color: #0081ff;
     background-color: #cce6ff;
 }
 
 .bg-purple.light {
     color: #6739b6;
     background-color: #e1d7f0;
 }
 
 .bg-mauve.light {
     color: #9c26b0;
     background-color: #ebd4ef;
 }
 
 .bg-pink.light {
     color: #e03997;
     background-color: #f9d7ea;
 }
 
 .bg-brown.light {
     color: #a5673f;
     background-color: #ede1d9;
 }
 
 .bg-grey.light {
     color: #8799a3;
     background-color: #e7ebed;
 }
 
 .bg-gradual-red {
     background-image: linear-gradient(45deg, #f43f3b, #ec008c);
     color: #ffffff;
 }
 
 .bg-gradual-orange {
     background-image: linear-gradient(45deg, #ff9700, #ed1c24);
     color: #ffffff;
 }
 
 .bg-gradual-green {
     background-image: linear-gradient(45deg, #39b54a, #8dc63f);
     color: #ffffff;
 }
 
 .bg-gradual-purple {
     background-image: linear-gradient(45deg, #9000ff, #5e00ff);
     color: #ffffff;
 }
 
 .bg-gradual-pink {
     background-image: linear-gradient(45deg, #ec008c, #6739b6);
     color: #ffffff;
 }
 
 .bg-gradual-blue {
     background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
     color: #ffffff;
 }
 
 .shadow[class*="-red"] {
     box-shadow: .06rem .06rem .08rem rgba(204, 69, 59, 0.2);
 }
 
 .shadow[class*="-orange"] {
     box-shadow: .06rem .06rem .08rem rgba(217, 109, 26, 0.2);
 }
 
 .shadow[class*="-yellow"] {
     box-shadow: .06rem .06rem .08rem rgba(224, 170, 7, 0.2);
 }
 
 .shadow[class*="-olive"] {
     box-shadow: .06rem .06rem .08rem rgba(124, 173, 55, 0.2);
 }
 
 .shadow[class*="-green"] {
     box-shadow: .06rem .06rem .08rem rgba(48, 156, 63, 0.2);
 }
 
 .shadow[class*="-cyan"] {
     box-shadow: .06rem .06rem .08rem rgba(28, 187, 180, 0.2);
 }
 
 .shadow[class*="-blue"] {
     box-shadow: .06rem .06rem .08rem rgba(0, 102, 204, 0.2);
 }
 
 .shadow[class*="-purple"] {
     box-shadow: .06rem .06rem .08rem rgba(88, 48, 156, 0.2);
 }
 
 .shadow[class*="-mauve"] {
     box-shadow: .06rem .06rem .08rem rgba(133, 33, 150, 0.2);
 }
 
 .shadow[class*="-pink"] {
     box-shadow: .06rem .06rem .08rem rgba(199, 50, 134, 0.2);
 }
 
 .shadow[class*="-brown"] {
     box-shadow: .06rem .06rem .08rem rgba(140, 88, 53, 0.2);
 }
 
 .shadow[class*="-grey"] {
     box-shadow: .06rem .06rem .08rem rgba(114, 130, 138, 0.2);
 }
 
 .shadow[class*="-gray"] {
     box-shadow: .06rem .06rem .08rem rgba(114, 130, 138, 0.2);
 }
 
 .shadow[class*="-black"] {
     box-shadow: .06rem .06rem .08rem rgba(26, 26, 26, 0.2);
 }
 
 .shadow[class*="-white"] {
     box-shadow: .06rem .06rem .08rem rgba(26, 26, 26, 0.2);
 }
 
 .text-shadow[class*="-red"] {
     text-shadow: .06rem .06rem .08rem rgba(204, 69, 59, 0.2);
 }
 
 .text-shadow[class*="-orange"] {
     text-shadow: .06rem .06rem .08rem rgba(217, 109, 26, 0.2);
 }
 
 .text-shadow[class*="-yellow"] {
     text-shadow: .06rem .06rem .08rem rgba(224, 170, 7, 0.2);
 }
 
 .text-shadow[class*="-olive"] {
     text-shadow: .06rem .06rem .08rem rgba(124, 173, 55, 0.2);
 }
 
 .text-shadow[class*="-green"] {
     text-shadow: .06rem .06rem .08rem rgba(48, 156, 63, 0.2);
 }
 
 .text-shadow[class*="-cyan"] {
     text-shadow: .06rem .06rem .08rem rgba(28, 187, 180, 0.2);
 }
 
 .text-shadow[class*="-blue"] {
     text-shadow: .06rem .06rem .08rem rgba(0, 102, 204, 0.2);
 }
 
 .text-shadow[class*="-purple"] {
     text-shadow: .06rem .06rem .08rem rgba(88, 48, 156, 0.2);
 }
 
 .text-shadow[class*="-mauve"] {
     text-shadow: .06rem .06rem .08rem rgba(133, 33, 150, 0.2);
 }
 
 .text-shadow[class*="-pink"] {
     text-shadow: .06rem .06rem .08rem rgba(199, 50, 134, 0.2);
 }
 
 .text-shadow[class*="-brown"] {
     text-shadow: .06rem .06rem .08rem rgba(140, 88, 53, 0.2);
 }
 
 .text-shadow[class*="-grey"] {
     text-shadow: .06rem .06rem .08rem rgba(114, 130, 138, 0.2);
 }
 
 .text-shadow[class*="-gray"] {
     text-shadow: .06rem .06rem .08rem rgba(114, 130, 138, 0.2);
 }
 
 .text-shadow[class*="-black"] {
     text-shadow: .06rem .06rem .08rem rgba(26, 26, 26, 0.2);
 }
 
 .bg-img {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .bg-mask {
     background-color: #333333;
     position: relative;
 }
 
 .bg-mask::after {
     content: "";
     border-radius: inherit;
     width: 100%;
     height: 100%;
     display: block;
     background-color: rgba(0, 0, 0, 0.4);
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
 }
 
 .bg-mask div,
 .bg-mask cover-view {
     z-index: 5;
     position: relative;
 }
 
 .bg-video {
     position: relative;
 }
 
 .bg-video video {
     display: block;
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     position: absolute;
     top: 0;
     z-index: 0;
     pointer-events: none;
 }